<script setup>
import {ref,onMounted,reactive} from "vue"
import{useRouter} from "vue-router"
import {register} from "@/api/user"
import {useUserStore} from '@/stores/user'
import { ElMessageBox, ElMessage } from 'element-plus'
const router = useRouter()


//数据对象
const ruleForm = reactive({
})

//校验规则
const rules = reactive({
    username:[
    {required: true,message:'请输入用户名',trigger:'blur'}
    ],
    password:[
        {required: true,message:'请输入密码',trigger:'blur'},
        {min:6,max:16, message:"密码长度为6到16",trigger:'blur'}
    ],
    name:[
        {required:true,message:'请输入昵称',trigger:'blur'},
        {max:12, message:"昵称不能超过10个字",trigger:'blur'}
    ],
    phoneNumber:[
        {required:true,message:'请输入联系方式',trigger:'blur'},
        {min:11,max:11, message:"输入的电话不符合要求",trigger:'blur'}
    ],
})

//获取到el-form元素的原生DOM对象
const ruleFormRef = ref()
const handleSubmitForm = (formEl) => {
  if (!formEl) return
  //el-form元素的原生DOM对象，然后进行验证，validateS是DOM对象的函数
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log(ruleForm)
      //请求后端api()
      register(ruleForm).then((res) => {
        //显示成功信息
        ElMessage({
            message: res.message,
            type:"success"
        })
        //成功之后，跳转到UserPageView页面
        router.push({
            path:'/user/login',
        })
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//返回事件的回调函数
const handleBackup = () => {
    //备份数据
    router.back()
    console.log('backup!')
}


</script>

<template>
  <div class="login-container">
    <el-card class="login-card" shadow="always">
        <h2 class="login-title">用户注册</h2>
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                status-icon
            >
                <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" />
                </el-form-item>

                <el-form-item label="密码" prop="password" v-if="!ruleForm.id">
                <el-input v-model="ruleForm.password" type="password" show-password />
                </el-form-item>

                <el-form-item label="昵称" prop="name">
                <el-input v-model="ruleForm.name" />
                </el-form-item>

                <el-form-item label="联系方式" prop="phoneNumber">
                <el-input v-model="ruleForm.phoneNumber" />
                </el-form-item>

                <div style="display: flex; width: 100%;height: 70px;align-items: center;justify-content: center;">
                    <el-button
                        type="info"
                        @click="handleSubmitForm(ruleFormRef)"
                        class="login-button"
                    >
                    完成
                    </el-button>
                    <el-button
                        type="info"
                        @click="handleBackup"
                        class="register-button"
                    >
                    返回
                    </el-button>
                </div>



            </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-size: cover; /* 或 'contain' 根据需要选择 */
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/image/20240823/619f531691ffa1637831446904.jpeg');
}

.login-card {
  width: 400px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景色，调整透明度 */
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  color: #868686;
}

.login-button {
  width: 40%;
}

.register-button {
  width: 40%;
}
</style>